<template>
  <div class="oneDiv">
    <div class="sumDiv">
      <!-- 新增按钮和搜索框start -->
      <div class="headFromDiv">
        <div class="leftDiv">
          <el-button type="primary" @click="addSeal()">新建文档</el-button>
        </div>
        <div class="rightDiv">
          <el-row class="elrow">
            <el-col>
              <el-form :inline="true" :model="searchData" class="demo-form-inline">
              <el-form-item>
                <el-input v-model="searchData.title" placeholder="请输入关键字"></el-input>
              </el-form-item>
                <el-form-item>
                  <el-button @click="seachTableData()">搜索</el-button>
                  <el-button @click="resetQuery()">重置</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="leftDiv2">
         <el-menu class="menu">
             <el-menu-item class="item"  @click="searchAll">   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;全部 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<el-tag type="success">{{ total1 }}</el-tag></el-menu-item>
             <el-menu-item class="item" @click="searchData1">财务类文档</el-menu-item>
             <el-menu-item class="item" @click="searchData2">合同类文档</el-menu-item>
             <el-menu-item class="item" @click="searchData3">技术类文档</el-menu-item>
             <el-menu-item class="item" @click="searchData4">人事类文档</el-menu-item>
             <el-menu-item class="item" @click="searchData5">项目类文档</el-menu-item>
         </el-menu>
        </div>
      <!-- 表格信息展示start -->
      <div class="bottomDiv"> 
        <el-container>
            <el-table :data="tableData" border style="width:95%;margin-left: 25px;"
          :header-cell-style="{ background: '#f4f4f4', color: 'black' }">
          <el-table-column prop="title" label="文章标题" width="100">
            <template slot-scope="scope">
              <router-link :to="{name :'xiangqing',query:{ a:scope.row}}"  style="text-decoration: none; color: #1890FF;">{{ scope.row.title }}</router-link>
              </template>
          </el-table-column>
          <el-table-column prop="versionNumber" label="版本号" width="190">
          </el-table-column>
          <el-table-column prop="author" label="作者" width="189">
          </el-table-column>
          <el-table-column prop="turnoverTime" label="更新时间" width="189">
          </el-table-column>
          <!-- <el-table-column label="头像">
      <template slot-scope="scope">
        <img :src="scope.row.img" alt="头像" style="width: 50px; height: 50px;">
      </template>
    </el-table-column> -->
          <el-table-column label="操作" width="190" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
   </el-container>
        
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[2, 10, 15, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 表格信息展示end -->

  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      // 条查以及分页的表单
      pageNum: 1,
      pageSize: 10,
      total: 0,
      searchData: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      total1:"",
      tableData: [],
    }
  },
  created() {
    // 初始化条查
    this.seachTableData();
  },

  methods: {

    // 查询
    seachTableData() {
      this.searchData.currentPage = this.pageNum;
      this.searchData.pageSize = this.pageSize;
      axios.post("document/queryDocument2", this.searchData)
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          this.total1 = res.data.data.total;
          console.log(res);
        });
    },
    // 新增按钮事件
    addSeal() {
      this.$router.push({ path: '/addDocument' });
    },
    //重置按钮
    resetQuery() {
      this.searchData = {}
      this.seachTableData();
    },
    // 编辑 弹框回显 修改标题走修改方法
    handleEdit(index, row) {
      console.log(row)
      this.$router.push({
        name: 'addDocument',
        params: row
      });
    },
    // 删除
    handleDelete(index, row) {
      axios.post("/document/deleteDocument?id=" + row.id)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("删除成功")
            this.seachTableData();
          } else {
            this.$message.error("删除失败")
            this.seachTableData();
          }
        })
    },

    // 点击弹框的取消数据清空，事件关闭
    call() {
      this.AddHolidayFrom = {}
      this.centerDialogVisible = false
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.seachTableData();
    },
    handleCurrentChange(val) {
      console.log(val)
      this.pageNum = val;
      this.seachTableData();
    },
    // 时间按钮递增
    handleChange(value) {
      console.log(value);
    },
     //左侧条查
  searchData1(){
        this.searchData.fromColumn=1,
        this.seachTableData();
      },
      searchData2(){
        this.searchData.fromColumn=2,
        this.seachTableData();
      },
      searchData3(){
        this.searchData.fromColumn=3,
        this.seachTableData();
      },
      searchData4(){
        this.searchData.fromColumn=4,
        this.seachTableData();
      },
      searchData5(){
        this.searchData.fromColumn=4,
        this.seachTableData();
      },
      searchAll(){
        this.searchData.fromColumn="",
        this.seachTableData();
      },

  }
}
</script>

<style scoped>
  .oneDiv {
    width: 100%;
    height: 100%;
    margin-top: -14px;
    background-color: rgba(244, 244, 244, 1);
    padding-top: 20px;
  }
  
  /* 装信息和条查的盒子 */
  .sumDiv {
    width: 100%;
    height: 1000px;
    margin: auto;
  }
  
  /* 搜索框和按钮的盒子 */
  .headFromDiv {
    width: 90%;
    height: 80px;
    /* margin: auto; */
    background-color: #fff;
    border-radius: 9px;
  }
  
  /* 左侧的 */
  .leftDiv {
    float: left;
    padding-top: 20px;
    padding-left: 25px;
  }
  
  .rightDiv {
    float: right;
    margin-top: 20px;
    margin-right: 15px;
  }
  
  .bottomDiv {
    width: 70%;
    height: 100%;
    /* margin: auto; */
    float: left;
    margin-top: 20px;
    padding-top: 20px;
    background-color: #fff;
    border-radius: 9px;
    margin-left:30px ;
   
  }
  
  /* 分页的盒子 */
  .block {
    text-align: right;
    margin-top: 10px;
    margin-right: 20px;
  }
  
  .el-row {
    margin-bottom: 20px;
  }
  
  .el-col {
    border-radius: 4px;
  }
  
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  
  
  .block {
    margin-top: 20px;
    text-align: right;
    padding-right: 20px;
  }
  .leftDiv2{
    width: 18%;
    height: 100%;
    background-color: #fff;
    float: left;
    margin-top: 48px;
    border-radius: 10 px;
  }
  .item{
    text-align: center;
    margin-top: 20PX;
    border-radius: 20px;
  }
  </style>